<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="编辑文章内容。">
    <a-card :body-style="{padding: '10px 15px'}" :bordered="false">
      <blog-article
        :article="article"
        :loading="loading"
        @submit="saveArticle"
      >
      </blog-article>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import BlogArticle from '@/components/Blog/BlogArticle.vue'
import { getArticle, editArticle } from '@/api/blog'
export default {
  name: 'ArticleEdit',
  components: { BlogArticle },
  component: {
    BlogArticle
  },
  data () {
    return {
      loading: true,
      article: {}
    }
  },
  computed: {
    id () {
      return this.$route.params.id
    }
  },
  mounted () {
    this.initArticle()
  },
  methods: {
    // handler
    saveArticle (data, e) {
      e.preventDefault()
      editArticle(this.id, data).then(res => {
        this.$message.success('Saved OK!')
        this.initArticle()
      })
    },
    initArticle () {
      this.loading = true
      getArticle(this.id).then(res => {
        this.article = res.result
      }).catch(e => {
        console.log(e)
        this.$message.error('failed to get article')
      }).finally(() => {
        this.loading = false
      })
    }
  },
  watch: {
    id (curr) {
      if (curr) {
        this.initArticle()
      }
    }
  }
}
</script>
